<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="范珍">
        <title>vue组件--2</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--添加属性,传递数据-->
            <nav-bar title="hello!" :name="name"></nav-bar>
            <button @click="changeName">修改name</button>
            <p>{{name}}</p>
        </div>
    
        <script>
            // 组件的作用域是孤立的,在子组件模板中不能使用父组件的数据;
            // 可以使用props把数据从父组件传递到子组件;
            // props是单向数据流，只能从父组件到子组件,不能反过来
            Vue.component('nav-bar',{
                // 添加props字段;接收从父组件传递过来的数据
                props:['title','name'],
                template:'<header><h1>{{title}}--{{name}}</h1><p @click="changeName">这是自定义导航条组件</p></header>',
                methods:{
                    changeName:function(){
                        console.log('-------');
                        // 如下代码,修改props中name会报警告
                        // 原因：vue语法建议子组件不能修改props中的数据;
                        // 基于动态绑定,不管子组件中name怎样修改，
                        // 只要父组件中name发生变化，
                        // 子组件中name就会随之变化;

                        // 可以认为props是只读属性，只可用，不可改
                        // this.name = '小目标';
                    }
                }
            })
           new Vue({
               el:'#app',
               data:{
                   name:'lucy',
                   age:20
               },
               methods:{
                   changeName:function(){
                       this.name = Math.random()+'';
                   }
               }
           })

           
            //基本类型:值传递(传值)
            // 把变量复制一份，把复制品传入函数;
            // 函数中修改的是复制品,不影响原值;
           var a = 10 ;
           function changeNum(a){
               a = 20 ;
               console.log(a);//20
           }
           changeNum(a);
           console.log(a); //10


            //对象类型:引用传递(传址)
            // 是把变量的地址传递过去，函数内部修改的还是原变量
            // 类似，建立文件的快捷方式，通过快捷方式操作的依旧是原文件
           var obj = {
               name:'lucy',
               age:20
           }
           function changeObj(obj){
               obj.sex = 'male';
               console.log(obj);
           }
           changeObj(obj);
           console.log(obj);


           var o = {
               name:'lucy',
               age:20
           }
           function changeO(o){
               o = {height:170};
               console.log(o);
           }
           changeO(o);
           console.log(o);
        </script>
    </body>
</html>